import styled from 'styled-components';
import {useState} from 'react'
require('../assets/icons/stop.svg')



const Wrapper=styled.div`
    position:fixed;
    width:100vw;
    height:100vh;
    z-index:100;
    background: rgba(98, 99, 100, 0.8);
    top:0;
    right:0;
    color: #f8f7f7;
    display:flex;
    justify-content: center;
    padding:20px;
    .card{
        display:flex;
        flex-direction:column;
        align-items:center;
        width:100%;
        margin-top:40px;
        >.time-wrapper{
            width:100%;
            display:flex;
            flex-direction:column;
            height:500px;
            background: linear-gradient(214deg, rgba(139,31,134,1) 0%, rgba(148,168,233,1) 100%);
            border-top-left-radius:20px;
            border-top-right-radius:20px;
            .delete{
                margin:20px;
                font-size:18px;
                letter-spacing:0.1em;
            }
            .time{
                display:flex;
                justify-content: center;
                margin-top:150px;  
                font-size:80px;
            }
        }
        >.content-wrapper{
            display:flex;
            background-color:#f3f3f3;
            color:black;
            width:100%;
            border-bottom-left-radius:20px;
            border-bottom-right-radius:20px;
            height:250px;
            justify-content: center;
            align-items:center;
            .content{
                font-size:20px;
                margin-right:20px;
                letter-spacing:0.1em;
            }
            .icon{
                width:60px;
                height:60px;
            } 
        }
          
    }
    
`
type TProp={
    tomato:string,
    onChange:()=>void,
    rmTomato:()=>void,
}
const CountDown=(props:TProp)=>{
    const [userTime,setUserTime]=useState(props.tomato)
    const [second,setSecond]=useState(()=>{return Number(userTime)*60})// 将用户输入的时间转为秒
    // 根据秒数转化为分钟数
    const secondToMinute=(time:number)=>{
        let a:string = (time/60).toString() // 整数位
        let b:string= (time%60).toString()  // 小数位
        if(a.length<=2){
            return a+'.'+b
        }else{
            let c=a.slice(0,2)
            if(Number(a)<1){
                if(b.length===1){
                    return '00.0'+b
                    
                }else{
                    return '00.'+b
                } 
            }
            if(Number(a)<10){
                if(b.length===1){
                    return '0'+c+'0'+b
                }else{
                    return '0'+c+b
                }
            }
            if(b.length===1){
                return c+'.0'+b
            }else{
                return c+'.'+b 
            }
                
        }
    }

    const toggleTime=(second:number)=>{
        const countDown=setTimeout(()=>{
            if(second===0){
                clearTimeout(countDown)
            }else{
                let nowSecond=second-1
                setSecond(nowSecond) 
                setUserTime(()=>{return secondToMinute(nowSecond)}) 
            }
            
        },1000)
    }
    toggleTime(second)
    return (
        <Wrapper>
            <div className='card'>
                <div className='time-wrapper'>
                    <div onClick={()=>{props.rmTomato()}} className='delete'>删除</div>
                    <div className='time'>{userTime}</div>
                </div>
                <div className='content-wrapper'>
                    <div className='content'>
                        <div>鸟随鸾凤飞高远，</div>
                        <div>人伴贤良品自高。</div>
                    </div>
                    <svg  className="icon"  onClick={()=>{props.onChange()}}>
                        <use xlinkHref="#stop" fill='black' />
                    </svg>
                </div>                                   
            </div>            
        </Wrapper>
    )
}

export default CountDown